<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>应用详情 - AIGC应用展示平台</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../assets/vendors/feather/feather.css">
    <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../assets/vendors/ti-icons/css/themify-icons.css">
    <link rel="stylesheet" href="../assets/vendors/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/vendors/typicons/typicons.css">
    <link rel="stylesheet" href="../assets/vendors/simple-line-icons/css/simple-line-icons.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <link rel="stylesheet" href="../assets/vendors/datatables.net-bs4/dataTables.bootstrap4.css">
    <link rel="stylesheet" type="text/css" href="../assets/js/select.dataTables.min.css">
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../assets/css/style.css">
    <!-- endinject -->
    <link rel="shortcut icon" href="../assets/images/favicon.png" />
</head>
<body class="with-welcome-text">
<!-- partial:partials/_navbar.html -->
<nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex align-items-top flex-row">
    <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start">
        <div class="me-3">
            <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-bs-toggle="minimize">
                <span class="icon-menu"></span>
            </button>
        </div>
        <div>
            <a class="navbar-brand brand-logo" href="index-page.php">
                AIGC应用
            </a>
            <a class="navbar-brand brand-logo-mini" href="index-page.php">
                <img src="../assets/images/logo-mini.svg" alt="logo" />
            </a>
        </div>
    </div>
    <div class="navbar-menu-wrapper d-flex align-items-top">
        <ul class="navbar-nav">
            <li class="nav-item fw-semibold d-none d-lg-block ms-0">
                <h1 class="welcome-text">欢迎来到, <span class="text-black fw-bold">AI应用展示平台</span></h1>
            </li>
        </ul>
        <ul class="navbar-nav ms-auto">
            <li class="nav-item">
                <form class="search-form" id="searchForm" action="#">
                    <i class="icon-search"></i>
                    <input type="search" id="search" class="form-control" placeholder="搜索" title="搜索">
                </form>
                <!-- 搜索结果显示区域 -->
                <div class="dropdown-menu" id="searchResults" aria-labelledby="searchButton" style="max-height: 300px; overflow-y: auto;">
                    <!-- 搜索结果将动态加载到此区域 -->
                </div>
            </li>
        </ul>
    </div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
    <!-- partial:partials/_sidebar.html -->
    <nav class="sidebar sidebar-offcanvas" id="sidebar">
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="index-page.php">
                    <i class="mdi mdi-grid-large menu-icon"></i>
                    <span class="menu-title">首页</span>
                </a>
            </li>

<!--            <li class="nav-item">-->
<!--                <a class="nav-link" data-bs-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">-->
<!--                    <i class="menu-icon mdi mdi-floor-plan"></i>-->
<!--                    <span class="menu-title">AI应用</span>-->
<!--                    <i class="menu-arrow"></i>-->
<!--                </a>-->
<!--                <div class="collapse" id="ui-basic">-->
<!--                    <ul class="nav flex-column sub-menu">-->
<!--                        <li class="nav-item"> <a class="nav-link" href="ui-features/buttons.html">AI绘画</a></li>-->
<!--                        <li class="nav-item"> <a class="nav-link" href="ui-features/dropdowns.html">AI视频</a></li>-->
<!--                        <li class="nav-item"> <a class="nav-link" href="ui-features/typography.html">AI大模型</a></li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </li>-->
        </ul>
    </nav>
    <!-- partial -->
    <div class="main-panel">
        <div class="content-wrapper">
            <div class="row">
                <?php include('../detail.php'); ?>
                <?php
                if (isset($app)) {
                    echo '
        <div class="col-md-12 d-flex align-items-start">
            <!-- 左侧卡片：Logo -->
            <div class="card me-3" style="width: 200px;">
                <img src="' . $app['logo'] . '" class="card-img-top img-thumbnail" alt="' . $app['appname'] . ' Logo">
            </div>

            <!-- 右侧卡片：文本信息 -->
            <div class="card" style="flex-grow: 1;">
                <div class="card-body">
                    <h5 class="card-title">' . $app['appname'] . '</h5>
                    <p><strong>类型: </strong>' . $app['type'] . '</p>
                    <p><strong>简介: </strong>' . $app['info'] . '</p>
                    <p><strong>详细信息: </strong>' . $app['details'] . '</p>
                    <a href="' . $app['url'] . '" class="btn btn-sm btn-dark">链接</a>
                </div>
            </div>
        </div>';
                } else {
                    echo '<p>没有找到该应用的详细信息。</p>';
                }
                ?>
            </div>

        </div>
        <!-- content-wrapper ends -->
        <!-- partial:partials/_footer.html -->
        <footer class="footer">
            <div class="d-sm-flex justify-content-center justify-content-sm-between">
                <span class="text-muted text-center text-sm-left d-block d-sm-inline-block"></span>
                <span class="float-none float-sm-end d-block mt-1 mt-sm-0 text-center">Copyright © 2024 AIGC应用展示平台. All rights reserved.</span>
            </div>
        </footer>
        <!-- partial -->
    </div>
    <!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../assets/vendors/js/vendor.bundle.base.js"></script>
<script src="../assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="../assets/vendors/chart.js/chart.umd.js"></script>
<script src="../assets/vendors/progressbar.js/progressbar.min.js"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="../assets/js/off-canvas.js"></script>
<script src="../assets/js/template.js"></script>
<script src="../assets/js/settings.js"></script>
<script src="../assets/js/hoverable-collapse.js"></script>
<script src="../assets/js/todolist.js"></script>
<!-- endinject -->
<script>
    $(document).ready(function() {
        // 当搜索框的输入内容发生变化时
        $('#search').on('input', function() {
            var searchKeyword = $(this).val(); // 获取用户输入的搜索词

            if (searchKeyword.length > 0) {
                // 发送AJAX请求到后端
                $.ajax({
                    url: '../search.php', // 后端PHP文件
                    method: 'POST',
                    data: { search: searchKeyword },
                    dataType: 'json',
                    success: function(response) {
                        // 处理返回的数据并显示
                        if (response.success && response.data.length > 0) {
                            var resultsHtml = '';
                            response.data.forEach(function(app) {
                                resultsHtml += `
                                <a href="detail-page.php?appid=${app.appid}" class="dropdown-item" style="cursor: pointer;">
                                    ${app.appname}
                                </a>
                            `;
                            });
                            $('#searchResults').html(resultsHtml); // 更新显示的结果
                            $('#searchResults').dropdown('show'); // 显示下拉菜单
                        } else {
                            $('#searchResults').html('<p class="dropdown-item">没有找到匹配的应用。</p>');
                        }
                    },
                    error: function() {
                        $('#searchResults').html('<p class="dropdown-item">搜索过程中出现错误，请重试。</p>');
                    }
                });
            } else {
                // 如果搜索框为空，清空搜索结果
                $('#searchResults').html('');
            }
        });
    });

</script>
<!-- Custom js for this page-->
<script src="../assets/js/jquery.cookie.js" type="text/javascript"></script>
<script src="../assets/js/dashboard.js"></script>
<!-- <script src="assets/js/Chart.roundedBarCharts.js"></script> -->
<!-- End custom js for this page-->
</body>
</html>
